<template>
    <div class="container" ref="container"></div>
    <div class="login-container">
        <div class="login-box">
            <div class="img-container">
                <img src="../../../img/logo.png" class="img">
            </div>
            <div class="text-container">
                <div style="display: flex">
                    <span style="transform: rotate(-10deg); color: #f1929d; font-weight: bolder">PIC</span>
                    <div style="width: 10px"></div>
                    <span>ACG</span>
                </div>
            </div>

            <van-cell-group inset>
                <van-field v-model="email" label="用户名" placeholder="请输入用户名"/>
                <van-field v-model="password" type="password" label="密码" placeholder="请输入密码"/>
                <van-button style="width: 100%" color="linear-gradient(to right, #f5b1b8, #f1929d)" type="success"
                            @click="login">登陆
                </van-button>
            </van-cell-group>
        </div>
    </div>

    <van-overlay :show="showToast">
        <loading-box>转呀转呀转呀转...</loading-box>
    </van-overlay>


</template>

<script>

import router from "@/router";
import {onMounted, ref} from "vue";
import {_login, _test} from "@/apis/loginAPI";
import { getCurrentInstance } from 'vue';

export default {
    name: "loginPage",
    setup() {

        const { appContext : { config: { globalProperties } } } = getCurrentInstance()

        let email = ref("")
        let password = ref("")
        let showToast = ref(false)

        function now() {
            alert("1")
        }

        async function test() {
            await _test('', ()=>{

            },()=>{

            })
        }

        async function login() {
            showToast.value = true
            const data = {
                email: email.value,
                password: password.value
            }
            globalProperties.$cookies.set('email',email.value,'7D')
            await _login(data, (res) => {
                console.log(res.data)
                if (res.data.message == "success") {
                    globalProperties.$cookies.set('token',res.data.data.token,'7D')

                    router.push("/main/home")
                } else {
                    alert("登陆失败")
                }
                showToast.value = false
            }, reason => {
                console.log(reason)
                showToast.value = false
                alert("登陆失败")
            })
        }

        onMounted(()=>{

        })

        return {
            test,
            now,
            login,
            showToast,
            email,
            password
        }
    },

    methods: {
        setContainer() {
            let width = document.documentElement.clientWidth;
            let height = document.documentElement.clientHeight;
            this.$refs.container.style.width = width + 'px';
            this.$refs.container.style.height = height + 'px'
        }
    },

    mounted() {
        this.setContainer()
    }
}
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    background: url("../../../img/backgr.png");
    background-size: 100%, 100%;
    filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    top: 20%;
    position: absolute;
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    width: 300px;
    height: 300px;
    border-radius: 5px;
}

.img-container {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-container {
    width: 100%;
    font-size: 40px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img {
    width: 90px;
    height: 90px;
    border-radius: 10px;
}
</style>